<template>
	<NavBar></NavBar>
	<!-- 自定义导航栏 -->
	<view class="custom-nav-bar">
		<view class="nav-bar-left"></view>
		<view class="nav-bar-title">我的</view>
		<view class="nav-bar-right" @click="goToSettings">
			<text class="iconfont icon-shezhi"></text>
		</view>
	</view>
	<view class="my-page">
		<!-- 用户信息区域 -->
		<view class="user-info-section">
			<view class="avatar-container">
				<image :src="SERVER_BASE_URL + userInfo.avatar.slice(1, userInfo.avatar.length)" class="user-avatar"
					mode="aspectFill"></image>
			</view>
			<view class="user-details">
				<text class="user-name">{{ userInfo.username }}</text>
				<view class="user-role">
					<u-tag :text="userInfo.role.message" :type="userInfo.role.code === 1 ? 'success' : 'primary'"
						size="small" plain></u-tag>
				</view>
			</view>
		</view>
		
		<MoreService title="系统服务" :serviceList="serviceList"></MoreService>
		<MoreService v-show="userInfo.role.code == 1" title="管理员" :serviceList="adminServiceList"></MoreService>
	

		<!-- 底部TabBar -->
		<TabBar></TabBar>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		SERVER_BASE_URL,
		getUserInfo
	} from '@/static/apis/wzry'
	import {
		readLocalStorage,
		isEqual
	} from '@/static/js/hub'

	// 跳转到设置页面
	const goToSettings = () => {
		uni.navigateTo({
			url: '/pages/settings/settings'
		})
	}

	// 用户数据
	const userInfo = ref(readLocalStorage('userInfo'))



	// 页面加载完成后显示维护提示
	onMounted(async () => {
		await getUserInfoSilently();
	})

	// 静默用户信息
	async function getUserInfoSilently() {
		try {
			var res = await getUserInfo();
			res = res.data;
			if (!isEqual(res, userInfo.value)) {
				userInfo.value = res;
				// 本地同步更新
				uni.setStorageSync('userInfo', res);

			}


		} catch (error) {
			console.error('获取用户信息失败:', error);
		}
	}


	// 定义服务项目列表
	const serviceList = ref([
    {
      title: '账号中心',
      icon: 'icon-yonghuzhongxin',
      name: '账号中心',
      link: '/pages/account_hub/account_hub'
    },
	    
  ])

//   管理员中心
const adminServiceList = ref([
 {
      title: '分配账号',
      icon: 'icon-fenpei',
      name: '分配账号',
      link: '/pages/account_assign/account_assign'
    },
  ])



	onLoad(() => {
		// 隐藏系统默认tabbar
		uni.hideTabBar()
	})
</script>

<style scoped lang="scss">
	.my-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
		/* 为底部自定义TabBar预留空间 */
	}

	/* 用户信息区域 */
	.user-info-section {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 30rpx;
	}

	.avatar-container {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 4rpx solid #f0f0f0;
		margin-right: 30rpx;
	}

	.user-avatar {
		width: 100%;
		height: 100%;
	}

	.user-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 15rpx;
	}

	.user-role {
		display: flex;
		align-items: center;
	}

	/* 余额数据展示 */
	.balance-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}

	.balance-card {
		flex: 1 1 calc(50% - 15rpx);
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
		padding: 20rpx 15rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.03);
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 15rpx;
		border: 1rpx solid rgba(255, 215, 0, 0.12);
		/* 微妙的金色边框 */
		transition: all 0.3s ease;
	}

	.balance-card:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.balance-icon {
		margin-right: 15rpx;
	}

	.balance-icon u-image {
		width: 40rpx;
		height: 40rpx;
	}

	.balance-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.balance-title {
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 5rpx;
	}

	.balance-amount {
		display: flex;
		align-items: baseline;
	}

	.amount-number {
		font-size: 40rpx;
		font-weight: 600;
		color: #333333;
	}

	.amount-unit {
		font-size: 24rpx;
		color: #666666;
		margin-left: 8rpx;
	}

	/* 自定义导航栏 */
	.custom-nav-bar {
		height: 88rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		position: relative;
	}

	.nav-bar-left,
	.nav-bar-right {
		width: 80rpx;
		text-align: center;
	}

	.nav-bar-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.nav-bar-right {
		color: #666;
		font-size: 28rpx;
	}

	/* 功能区域占位 */
	.function-section {
		padding: 0 30rpx;
	}

	.function-item {
		background-color: #ffffff;
		padding: 40rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.placeholder-text {
		font-size: 28rpx;
		color: #999999;
	}

	.function-item-text {
		font-size: 28rpx;
		color: #333333;
	}

	.function-item:active {
		background-color: #f5f5f5;
	}
</style>